<script setup>
import TimelineCard from '@/components/TimelineCard.vue';

const timelines = ref([
  { date: '2023-12', title: '事件1', content: '内容...' },
  { date: '2023-11', title: '事件2', content: '内容...' }
]);
</script>

<template>
    <div class="wrapper">
        <div class="sidebar">
            <div class="timeline-nav">
                <h3>时间归档</h3>
                <ul>
                    <li v-for="item in timelines" :key="item.date">
                        {{ item.date }}
                    </li>
                </ul>
            </div>
        </div>
        <div class="content">
            <TimelineCard v-for="item in timelines" :key="item.date" :timeline="item" />
        </div>
    </div>
</template>

<style lang="scss" scoped>
.wrapper {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: var(--gap);

    .sidebar {
        width: 100%;
        min-height: 600px;
    }

    .content {
        width: 100%;
    }
}

.timeline-nav {
    padding: var(--space);
    background: var(--white);
    border-radius: var(--radius);

    h3 {
        margin-bottom: var(--gap);
    }

    ul li {
        padding: var(--space) 0;
        cursor: pointer;
    }
}

// 媒体查询
@media (max-width: 768px) {
    .wrapper {
        grid-template-columns: 1fr;

        .sidebar {
            width: 100%;
            margin-bottom: var(--gap);
        }
    }
}
</style>